<template>
  <div>
    <el-dialog
      v-model="visible"
      @close="closedDialog"
      width="600px"
      :title="$t('flow.resolve')"
    >
      <el-form
        ref="taskFormRef"
        :model="taskFrom"
        label-width="100px"
        :rules="rules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('task.action')" prop="action">
              <el-radio-group v-model="taskFrom.action">
                <el-radio
                  v-for="item in model?.selectActions"
                  :key="item.key"
                  :value="item.key"
                >
                  {{ item.value }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('task.comment')" prop="comment">
              <el-input
                v-model="taskFrom.comment"
                style="width: 420px"
                :rows="4"
                type="textarea"
                placeholder="请输入意见"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closedDialog">{{ $t("common.cancel") }}</el-button>
          <el-button type="primary" @click="submitForm">
            {{ $t("common.confirm") }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, type PropType, watch, reactive } from "vue";
import { type FormInstance, type FormRules, ElMessage } from "element-plus";
import { type TaskDealWith } from "@/api/flow/types";
import type { FlowResolveTaskRequest } from "@/api/flow/task/types";
import { taskApi } from "@/api/flow/task/index";
import { BoolAny } from "@/util/protobuf";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

defineOptions({ inheritAttrs: false });

const taskFormRef = ref<FormInstance>();
const rules = reactive<FormRules<FlowResolveTaskRequest>>({
  action: [
    {
      required: true,
      message: t("task.action"),
      trigger: "change",
    },
  ],
  comment: [
    {
      required: true,
      message: t("task.comment"),
      trigger: "change",
    },
  ],
});

const model = defineModel<TaskDealWith>();
const taskFrom = ref<FlowResolveTaskRequest>({
  requestId: Math.random() + "task",
  vars: {},
});
const emits = defineEmits(["refresh"]);

// 提交表单校验
const submitForm = async () => {
  await taskFormRef.value?.validate((valid) => {
    if (valid) {
      //更新值.
      if (model.value) {
        taskFrom.value.taskId = model.value.taskId;
        if (model.value.varName) {
          taskFrom.value.vars[model.value.varName] = new BoolAny(
            Boolean(taskFrom.value.action)
          );
        }
      }
      taskApi.resolveTask(taskFrom.value).then((res) => {
        if (res.status === 200) {
          ElMessage({
            message: t("common.submitSuccess"),
            type: "success",
          });
          emits("refresh", res.status === 200);
          closedDialog();
        }
      });
    }
  });
};

const visible = ref(false);
if (model.value) {
  visible.value = model.value.resolveVisable as boolean;
  taskFrom.value.action = model.value.action;
  taskFrom.value.comment = model.value.comment;
}

// 关闭弹框
function closedDialog() {
  if (model.value) {
    model.value.resolveVisable = false;
  }
}
</script>
